<template>
    <view @tap="handleTap" :class="['jk-cell', { 'jk-cell-last': isLastCell }, { 'jk-cell-access': isLink }]">
        <view class="jk-cell-icon">
            <slot name="icon"></slot>
        </view>
        <view class="jk-cell-bd">
            <view v-if="title" class="jk-cell-text">{{ title }}</view>
            <view v-if="label" class="jk-cell-desc">{{ label }}</view>
            <slot></slot>
        </view>
        <view @tap="navigateTo" class="jk-cell-ft">
            <block v-if="value" :key="value">{{ value }}</block>
            <block v-else :key="value">
                <slot name="footer"></slot>
            </block>
        </view>
    </view>
</template>

<script>
    export default {
        name: 'Cell',
        props: {
            // 左侧标题
            title: {
                type: String
            },
            // 标题下方的描述信息
            label: {
                type: String
            },
            // 右侧内容
            value: {
                type: String
            },
            // 只有点击 footer 区域才触发 tab 事件
            onlyTapFooter: {
                type: Boolean
            },
            // 是否展示右侧箭头并开启尝试以 url 跳转
            isLink: {
                type: null,
                default: ''
            },
            // 链接类型，可选值为 navigateTo，redirectTo，switchTab，reLaunch
            linkType: {
                type: String,
                default: 'navigateTo'
            },
            url: {
                type: String,
                default: ''
            }
        },
        data() {
            return {
                isLastCell: false
            };
        },
        methods: {
            navigateTo () {
                const url = this.url;
                const type = typeof this.isLink;
                this.$emit('click', {});
                if (!this.isLink || !url || url === 'true' || url === 'false') return;
                
                if (type !== 'boolean' && type !== 'string') {
                    console.warn('isLink 属性值必须是一个字符串或布尔值', this.isLink);
                    return;
                }
            
                if (['navigateTo', 'redirectTo', 'switchTab', 'reLaunch'].indexOf(this.linkType) === -1) {
                    console.warn('linkType 属性可选值为 navigateTo，redirectTo，switchTab，reLaunch', this.linkType);
                    return;
                }
                switch (this.linkType){
                	case "navigateTo":
                        uni.navigateTo({
                        	url: url
                        })
                		break;
                    case "redirectTo":
                        uni.redirectTo({
                        	url: url
                        })
                    	break;
                    case "switchTab":
                        uni.switchTab({
                        	url: url
                        })
                    	break;
                    case "reLaunch":
                        uni.reLaunch({
                        	url: url
                        })
                    	break;
                	default:
                        throw new Error('routerType参数传入错误')
                		break;
                }
            },
            handleTap () {
                if (!this.onlyTapFooter) {
                    this.navigateTo();
                }
            },
        },
    }
</script>

<style lang="scss">
    .jk-cell {
        position: relative;
        padding: 12px 15px;
        display: flex;
        background: #fff;
        align-items: center;
        line-height: 1.4;
        font-size: 14px;
        overflow: hidden;
        &:after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 200%;
            height: 200%;
            transform: scale(.5);
            transform-origin: 0 0;
            pointer-events: none;
            box-sizing: border-box;
            border: 0 solid #e9eaec;
            border-bottom-width: 1px;
            left: 15px;
            right: 0;
        }
        .jk-cell-icon {
            margin-right: 5px;
            &:empty {
                display: none
            }
        }
        
        .jk-cell-bd {
            flex: 1;
            .jk-cell-text {
                line-height: 24px;
                font-size: 14px
            }
            
            .jk-cell-desc {
                line-height: 1.2;
                font-size: 12px;
                color: #80848f
            }
        }
        .jk-cell-ft {
            position: relative;
            text-align: right;
            color: #495060;
            padding-right: 13px;
        }
    }

    .jk-cell-access {
        .jk-cell-ft{
            padding-right: 13px;
            &:after{
                content: " ";
                display: inline-block;
                width: 6px;
                height: 6px;
                position: absolute;
                top: 50%;
                right: 2px;
                border-width: 2px 2px 0 0;
                border-color: #dddee1;
                border-style: solid;
                transform: translateY(-50%) matrix(.71, .71, -.71, .71, 0, 0);
            }
        }
        
    }
</style>
